<template>
    <el-dialog v-model="centerDialogVisible" @close="store.$patch({ task: false })" :show-close="false" top="2.3%"
        class="TaskDialog" width="1000px" center>
        <div class="bigtask">
            <header>
                <div></div>
                <span>{{ $t("language.task.name") }}</span>
                <div class="clcire">
                    <el-icon color="#b5bac8" @click="close">
                        <CloseBold />
                    </el-icon>
                </div>
            </header>
            <div class="task" v-loading="loading">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane v-for="(item, index) in tablist" :label="$t(item.name)" :name="index">
                        <component :is="item.component" />
                    </el-tab-pane>

                </el-tabs>
            </div>
        </div>
    </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref, shallowRef, nextTick, watch, defineAsyncComponent, markRaw } from "vue";
import { useI18n } from "vue-i18n";
import { CloseBold } from '@element-plus/icons-vue'
const { t } = useI18n();
const store = useStore()
let slots = markRaw(defineAsyncComponent(() => import("./task/slots.vue")));
let mesa = markRaw(defineAsyncComponent(() => import("./task/mesa.vue")));
let caca = markRaw(defineAsyncComponent(() => import("./task/caca.vue")));
const activeName = shallowRef<number>(0);
const iscomponent = ref(slots)
let tablist = reactive<{ name: string, component: Element | any }[]>([

    {
        name: "language.task.tab2",
        component: slots,
    },
    {
        name: "language.task.tab3",
        component: mesa,
    },
    {
        name: "language.task.tab4",
        component: caca,
    },
]);
const handleClick = (tab: any, event: Event) => {
    console.log(tab, event);
};
let centerDialogVisible = computed<boolean>(() => store.task)
let loading = shallowRef<boolean>(false);
watch(centerDialogVisible, (newval) => {
    if (newval) {
        loading.value = true;
        nextTick(() => {
            loading.value = false;
            // let time = setInterval(() => {
            //     loading.value = false;
            //     clearInterval(time);
            // }, 500);
        });
    }
}, {
    immediate: true
});
//暴露打开弹窗事件
let opent = () => {
    store.$patch({ task: true })
};

//关闭弹窗
let close = () => {
    store.$patch({ task: false })
};


</script>

<style lang="scss">
.TaskDialog {
    border-radius: 15px !important;
    padding: 0 0 40px 0 !important;
    background-color: #32353e !important;

    .el-tabs__item {
        color: #b5bac8;
    }

    .el-tab-pane {
        padding: 20px;
    }

    .el-dialog__header {
        height: 0;
    }

    .el-tabs__nav-wrap,
    .el-tabs__nav-scroll {
        background-color: rgb(60, 64, 74) !important;
    }

    .el-tabs__item.is-active {
        color: #fff !important;
    }

    .el-tabs__item {
        padding: 0 10px !important;
        font-size: 20px;
    }

    .el-tabs__active-bar {
        background: #fff !important;
    }

    .el-tabs__nav-wrap::after {
        background-color: rgb(60, 64, 74);
    }

    .el-tabs__nav-prev {
        height: 40px;
        line-height: 40px;
    }

    .el-tabs__nav-next {
        height: 40px;
        line-height: 40px;
    }
}
</style>
<style lang="scss" scoped>
.bigtask {
    width: 100%;

    header {
        height: 57px;
        border-radius: 15px;
        @include flex(row, space-between, center);
        padding: 0 10px;
        background-color: rgb(50, 53, 62);

        div {
            width: 28px;
            height: 28px;
            border-radius: 14px;
        }

        span {
            font-size: 18px;
            color: #b5bac8;
            font-weight: bold;
        }

        .clcire {
            border: 2px solid #b5bac8;
            @include flex(row, center, center);
            cursor: pointer;
        }
    }

    .task {
        width: 100%;
        min-height: 78vh;
        background-color: rgb(50, 53, 62);
    }
}
</style>